<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				overflow: hidden
			}
			#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #eeeeee;
			}
			
			#nav li {
				float: left;
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #333;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #dddddd;
				font-weight: 700;
				color: #222;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">Homepage</span></a>
					</li>


					<li>
						<a href="beijing.html"><span class="cn">个人简历</span><span class="en">个人简历</span></a>
					</li>
					<li>
						<a href="Baoposhizhong.html"><span class="cn">爆破时钟</span><span class="en">爆破时钟</span></a>
					</li>


					<li>
						<a href="free.html"><span class="cn">自由坠体</span><span class="en">自由坠体</span></a>
					</li>


					<li>
						<a href="huizhihuabu.html"><span class="cn">绘制画布</span><span class="en">绘制画布</span></a>
					</li>
					
					<li>
						<a href="manyballs.html"><span class="cn">缤纷小球</span><span class="en">缤纷小球</span></a>
					</li>
					
					<li>
						<a href="screen .html"><span class="cn">屏幕保护</span><span class="en">屏幕保护</span></a>
					</li>


					<li>
						<a href="TaiJi3.html"><span class="cn">运动太极</span><span class="en">运动太极</span></a>
					</li>
					
					<li>
						<a href="Tantiaoxiaoqiu.html"><span class="cn">弹跳小球</span><span class="en">弹跳小球</span></a>
					</li>
				</ul>
			</div>
		<canvas id="myCanvas" width="1330" height="620"></canvas>
		
		<script type="text/javascript">
var numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				
				[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				],//:
			];
			var arcArr=[];
			var canvas = document.getElementById("myCanvas");
			var ctx=canvas.getContext("2d");

			
			
			var i;
			var j;
			
			var R=8;
			var r,g,b;
			var img=new Image();
			img.src="img/桌面1.jpg";
			var balls=[];
			img.onload = function(){
				var date=new Date();
				setInterval(function(){	
					ctx.clearRect(0,0,1330,620);
					ctx.drawImage(img, 0, 0,1330,620);
					var text=[1,0,":",5,3,":",8,9];
					var time=new Date();
					if(time.getMinutes() != date.getMinutes()){
						var mgw=date.getMinutes()%10;
						addBalls(640,100,mgw);
						var msw1=parseInt(time.getMinutes()/10);
						var msw2=parseInt(date.getMinutes()/10);	
						if(msw2!=msw1){
							addBalls(480,100,msw2);
						}					
					}
					if(time.getSeconds() != date.getSeconds()){
						var gw=date.getSeconds()%10;
						addBalls(1020,100,gw);
						var sw1=parseInt(time.getSeconds()/10);
						var sw2=parseInt(date.getSeconds()/10);	
						if(sw2!=sw1){
							addBalls(860,100,sw2);
						}
						
					}
					
					if(time.getHours() != date.getHours()){
						var hgw=date.getMinutes()%10;
						addBalls(260,100,hgw);
						var hsw1=parseInt(time.getMinutes()/10);
						var hsw2=parseInt(date.getMinutes()/10);	
						if(hsw2!=hw1){
							addBalls(100,100,hgw2);
						}					
					}
					date=time;
					text[0]=parseInt(date.getHours()/10);
					text[1]=date.getHours()%10;
					
					text[3]=parseInt(date.getMinutes()/10);
					text[4]=date.getMinutes()%10;
					
					text[6]=parseInt(date.getSeconds()/10);
					text[7]=date.getSeconds()%10;
					for(var t=0;t<text.length;t++){
						if(text[t]==":"){
							text[t]=10;
						}
//						printNum(t*160+10,100,text[t]);
						if(t==0||t==1){
							printNum(t*160+100,100,text[t]);
						}
						else if(t==2){
							printNum(t*160+90,100,text[t]);
						}
						else if(t==3||t==4){
							printNum(t*160,100,text[t]);
						}
						else if(t==5){
							printNum(t*160-20,100,text[t]);
						}
						else if(t==6||t==7){
							printNum(t*160-100,100,text[t]);
						}
					}
					drawBalls();
				},33);
				};
				function addBalls(addX,addY,num){										
					
		           		
	           		for(i=0;i<numbers[num].length;i++){	
	           			var t=2*10*i;
						for(j=0;j<numbers[num][i].length;j++){
							var vx = Math.random()*5+5;
			           		if(Math.random()>0.5){
			           		 	vx = -vx;
			           		}
		           			var vy = Math.random()*10+5;
			           		if(Math.random()>0.5){
			           		 	vy = -vy;
			           		}
							var l=2*10*j;
							var r=parseInt(Math.random()*256);
							var g=parseInt(Math.random()*256);
							var b=parseInt(Math.random()*256);
							var a=Math.random();
							if(numbers[num][i][j]==1){
								balls.push([addX+l,addY+t,10,vx,vy,"rgba("+ r +","+ g +","+ b +","+ a +")"]);
							}
						}						
					}
		           	
					
					
				}
					
				function drawBalls(){					
					for(var i=0;i<balls.length;i++){
						ctx.beginPath();
						ctx.fillStyle=balls[i][5];
						ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI);
						ctx.fill();
						balls[i][0]+=balls[i][3];						
						if(balls[i][1]>canvas.height){
							balls[i][4]=-balls[i][4];
							balls[i][4]=0.6*balls[i][4];//阻力，影响下次的弹跳高度，如果不加会越弹高
							balls[i][1]=600-balls[i][2];
						}
						balls[i][1]+=balls[i][4];
						balls[i][4]+=3;
					}
					
				}
				
				
				
				function printNum(arcX,arcY,num){
					var print=numbers[num];	
					r=parseInt(Math.random()*256);
					g=parseInt(Math.random()*256);
					b=parseInt(Math.random()*256);
					for(i=0;i<print.length;i++){						
						var Y=2*R*i+arcY;
						for(j=0;j<print[i].length;j++){
							var X=2*R*j+arcX;
							if(print[i][j]==1){
								ctx.beginPath();
								
								ctx.fillStyle="plum";
								ctx.arc(X,Y,R,0,2*Math.PI);
								ctx.fill();
						}
						}						
					}				
				}
		</script>
	</body>
</html>
